<template>
  <el-dialog
    title="内容结构配置"
    :visible.sync="open"
    width="90%"
    append-to-body
    @close="closeDialog"
    custom-class="business-dialog fixed-dialog"
    :close-on-click-modal="false"
    top="20px"
  >
    <div class="btns">
      <el-button type="primary" size="small" @click="handleSubmit" :loading="saveLoading">保存</el-button>
    </div>
    <div class="content">
      <el-form :model="form" ref="queryForm" label-width="auto" size="small" id="structureSettingForm">
        <el-row :gutter="20" class="row-title">
          <el-col :span="3">
            <el-form-item>序号</el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>结构名称</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>允许的表达式</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>是否必备</el-form-item>
          </el-col>
        </el-row>
        <div class="table-body">
          <el-row :gutter="20" v-for="(item, index) in dataList" :key="item.id">
            <el-col :span="3">
              <el-form-item>{{ item.sectionIndex }}</el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>{{ item.sectionName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-select
                  v-tag-re-render="true"
                  v-model="dataList[index].expressionIds"
                  multiple
                  style="width: 100%"
                  :disabled="readonly || item.disabled"
                >
                  <el-option
                    v-for="item in expressions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.name === '文字'"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-switch
                  v-model="dataList[index].requireFlag"
                  size="mini"
                  :disabled="readonly || item.disabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { getRuleStructureList, getExpressionList, updateRuleStructure } from '@/api/business'
import { Message } from 'element-ui'

export default {
  name: 'StructureSetting',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentRule: {
      type: Object,
      default: () => ({})
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val) {
      this.open = val
    },
    currentRule(val) {
      if (val.id) {
        this.handleQuery()
      }
    }
  },
  data() {
    return {
      open: this.visible,
      loading: false,
      dataList: [],
      form: {},
      expressions: [],
      saveLoading: false
    }
  },
  mounted() {
    this.handleQuery()
    this.getExpressions()
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
      this.$emit('onClose')
    },
    handleQuery() {
      if (!this.currentRule?.id) return
      getRuleStructureList({
        ruleId: this.currentRule.id
      }).then((res) => {
        const listLength = res.data.length
        this.dataList = res.data?.map((i, index) => ({
          ...i,
          expressionIds: i.expressionIds?.split?.(',') || [],
          requireFlag: i.required === '1',
          // 前面4行和最后两行不允许编辑
          disabled: index < 4 || index > listLength - 3
        }))
      })
    },
    // 查询表达式
    getExpressions() {
      getExpressionList({ pageSize: 100 }).then((res) => {
        this.expressions = res.data.list.map((i, index) => ({
          ...i,
          id: i.id + ''
        }))
      })
    },
    handleSubmit() {
      let list = JSON.parse(JSON.stringify(this.dataList))
      list = list.map((i) => ({
        ...i,
        expressionIds: i.expressionIds?.join(','),
        required: i.requireFlag ? '1' : '0'
      }))
      this.saveLoading = true
      updateRuleStructure({
        ruleId: this.currentRule.id,
        list
      }).then((res) => {
        this.saveLoading = false
        Message.success('保存成功')
        this.open = false
      })
    }
  }
}
</script>
<style>
.fixed-dialog .el-dialog__body {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
#structureSettingForm .el-tag__close[data-title='文字'] {
  display: none;
}
</style>
<style scoped>
.content {
  padding: 24px;
}
.btns {
  margin-left: 24px;
}
</style>
